<template>
  <div class="component_container">
    <!-- 时钟组件 -->
    <div class="clock_content">
      <canvas id="clock" width="50" height="50"></canvas>
    </div>
  </div>
</template>

<script>
import { onMounted, computed, watch } from "vue";
import { useStore } from "vuex";

export default {
  name: "ClockTimer",
  setup(props, context) {
    const store = useStore();

    // 计算属性
    const currentDateObj = computed(() => store.state.currentDateObj);

    // 属性监听
    watch(
      () => currentDateObj.value,
      (newVal) => {
        draw();
      }
    );

    const draw = () => {
      const canvas = document.getElementById("clock");
      if (!canvas) return;
      const ctx = canvas.getContext("2d");
      ctx.clearRect(0, 0, 50, 50);
      ctx.save();
      ctx.translate(25, 25);
      const sec = currentDateObj.value.getSeconds();
      const min = currentDateObj.value.getMinutes();
      const hour = currentDateObj.value.getHours();
      // 绘制表盘
      for (let i = 1; i < 13; i++) {
        ctx.save();
        ctx.rotate((Math.PI * 2 * i) / 12);
        ctx.beginPath();
        ctx.moveTo(0, 21);
        ctx.lineTo(0, 24);
        ctx.strokeStyle = "blue";
        ctx.lineWidth = i % 3 ? 2 : 4;
        ctx.strokeStyle = i % 3 ? "blue" : "red";
        ctx.closePath();
        ctx.stroke();
        ctx.restore();
      }
      // 绘制时针
      ctx.save();
      ctx.rotate((Math.PI * 2 * hour) / 12);
      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.lineTo(0, -14);
      ctx.strokeStyle = "red";
      ctx.lineWidth = 5;
      ctx.closePath();
      ctx.stroke();
      ctx.restore();
      // 绘制分针
      ctx.save();
      ctx.rotate((Math.PI * 2 * min) / 60);
      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.lineTo(0, -18);
      ctx.strokeStyle = "orange";
      ctx.lineWidth = 3;
      ctx.closePath();
      ctx.stroke();
      ctx.restore();
      // 绘制秒针
      ctx.save();
      ctx.rotate((Math.PI * 2 * sec) / 60);
      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.lineTo(0, -22);
      ctx.lineWidth = 2;
      ctx.strokeStyle = "green";
      ctx.closePath();
      ctx.stroke();
      ctx.restore();
      // 中心的原点
      ctx.beginPath();
      ctx.arc(0, 0, 2, 0, 2 * Math.PI);
      ctx.strokeStyle = "red";
      ctx.stroke();
      ctx.restore();
    };

    const initClock = () => {
      draw();
      window.setInterval(() => {
        draw();
      }, 1000);
    };

    /**
     * 初始化
     */
    onMounted(() => {
      draw();
    });

    return {};
  },
};
</script>

<style lang="less" scoped>
.component_container {
  position: relative;
  border: 2px solid rgb(161, 103, 66);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  .clock_content {
    width: 98%;
    height: 98%;
    border-radius: 50%;
    border: 1px solid #ccc;
    background-color: antiquewhite;
    position: relative;
    .scale {
    }
  }
}
</style>
